<template>
  <el-breadcrumb separator="/" :separator-icon="ArrowRight" class="flex flex-nowrap">
    <el-breadcrumb-item
      v-for="(item, index) in breadcrumbList"
      :key="index"
      :to="item.path"
    >
      <div class="flex items-center">
        <el-icon v-if="item.icon">
          <component :is="item.icon.replace('i-ep-', '')" />
        </el-icon>
        <span class="pl-1" style="text-wrap: nowrap;"> {{ item.title }}</span>
      </div>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import { onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { RouteLocationMatched } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import { findBreadcrumbPath } from "@/utils/breadcrumb";
import { useMenuStore } from "@/stores/menu"; // 假设菜单数据存储在 Pinia 中

interface BreadcrumbItem {
  title: string;
  path?: string;
  icon?: string;
}

const route = useRoute();
const router = useRouter();
const menuStore = useMenuStore();

// 递归查找所有匹配的路由记录（包括父级）
const getMatchedRoutes = (matched: RouteLocationMatched[]) => {
  return matched.filter((m) => m.meta?.title);
};

// 生成面包屑数据
// 方案一
// const breadcrumbList = computed(() => {
//   const matched = getMatchedRoutes(route.matched);
//   return matched.map((m) => ({
//     title: m.meta.title as string,
//     path: m.path,
//     icon: m.meta.icon as string | undefined
//   }));
// });
onMounted(() => {
  if (!menuStore.menuTree) {
    menuStore.fetchMenuTree();
  }
});
// 方案二
const breadcrumbList = computed(() => {
  console.log(menuStore.menuTree, findBreadcrumbPath(menuStore.menuTree, route.path));
  return findBreadcrumbPath(menuStore.menuTree, route.path);
});
</script>
